<template>
    <div class="platform-page page">
        <div class="content">
            <PlatformCrumb back="返回">
                <el-button type="primary" size="mini" @click="goAdd" slot="right">新增资讯</el-button>
            </PlatformCrumb>
            <div class="curriculum">
                <div class="curriculum-title">
                    <div class="cur hove">新闻资讯</div>
                </div>
                <div class="content-con">
                    <div class="box-con cur" v-for="(item,index) in list" :key="index">
                        <img @click="goDetail(item.id)" :src="item.showImg|filtersImg" class="box-img"/>
                        <p @click="goDetail(item.id)">{{item.title}}</p>
                        <img src="/images/delect.png" @click="showDelete(index)" class="box-delect cur"/>
                        <img src="/images/p-alter.png" @click="goEdit(item.id)" class="box-alter cur"/>
                    </div>
                </div>
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total">
                </el-pagination>
            </div>
            <div v-show="isdelete" @click="delete_fun" class="mask"></div>
            <div v-show="isdelete" class="delete_sai delete_flex_start">
                <div class="delete_sai_body">
                    <div class="delete_sai_body2 delete_jiaoan">
                        <span class="isdeleteja">是否删除资讯</span>
                        <img class="delete_box_img" :src="deletedata.showImg|filtersImg" alt="">
                        <div class="delete_but_div">
                            <div class="delete_but1 cur" @click="getDelete(deletedata.id)">
                                确认删除
                            </div>
                            <div class="delete_but2 cur" @click="delete_fun">
                                取消
                            </div>
                        </div>
                    </div>
                </div>
                <i class="el-icon-circle-close cur" @click="delete_fun"></i>
            </div>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import { informationgetList,informationeditOne} from '../../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb,
        },
        data() {
            return {
                active: 0,
                type: 4,
                pageSize: 8,
                pageNum: 1,
                key: '',
                total: 0,
                list: [],
                Trainlist: [],
                Traintotal: 0,
                isdelete: false,
                deletedata: {
                    address: "",
                    age: "",
                    count: 0,
                    createTime: '',
                    id: 0,
                    imgs: "",
                    money: 0,
                    name: "",
                    reason: '',
                    status: '',
                    sum: '',
                    time: '',
                    type: 0,
                    showImg:''
                },
            };
        },
        created() {
            this.GetTrainList()
        },
        methods: {
            // 分类切换
            switchtitle(e) {
                this.active = e
            },
            handleClick(row) {
                console.log(row);
            },
            showDelete(e) {
                this.isdelete = true
                this.deletedata = this.list[e]
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.GetTrainList()
            },
            handleCurrentChange(val) {
                this.pageNum = val
                this.GetTrainList()
            },
            delete_fun() {
                this.isdelete = !this.isdelete
            },
            goDetail(e) {
                var that = this;
                that.$router.push({
                    path: '/platform/news/detail',
                    query: {
                        id: e
                    }
                })
            },
            goEdit(e) {
                var that = this;
                that.$router.push({
                    path: '/platform/news/edit',
                    query: {
                        id: e
                    }
                })
            },
            goAdd() {
                var that = this;
                that.$router.push({
                    path: '/platform/news/edit',
                })
            },
            getDelete(e) {
                var that = this;
                informationeditOne({
                    'status': 1,
                    'id': e,
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        that.isdelete = false
                        that.GetTrainList()
                    }
                });
            },
            GetTrainList() {
                informationgetList({
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize,
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                });
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }

    };
</script>

<style lang="less" scoped>
    @import url("../platform.less");

    .operation {
        margin-right: 25px;
    }

    .pass-btn {
        background-color: #2d64b3;
        border-color: #2d64b3;

        &:hover {
            background-color: #2d64b3;
            border-color: #2d64b3;
        }
    }

    .curriculum {
        background-color: #fff;
        padding: 40px 0 80px 0;
    }

    .curriculum-title {
        width: 100%;
        text-align: center;
    }

    .curriculum-title div {
        width: 100px;
        height: 28px;
        line-height: 28px;
        display: inline-block;
        font-size: 16px;
        color: #333333;
    }

    .curriculum-title .hove {
        background-color: #c60818;
        border-radius: 2px;
        color: #fff;
    }

    .content-con {
        margin-bottom: 85px;
    }

    .box-con {
        width: 200px;
        display: inline-block;
        position: relative;
        margin: 35px 41px 0 41px;

    }

    .box-con .box-img {
        width: 200px;
        height: 156px;
    }

    .box-con p {
        font-size: 14px;
        color: #333333;
        margin-top: 20px;
    }

    .box-delect {
        width: 16px;
        height: 19px;
        position: absolute;
        top: 0;
        right: -28px;
    }

    .box-alter {
        width: 18px;
        height: 17px;
        position: absolute;
        top: 33px;
        right: -30px;
    }

    .publish-btn {
        width: 110px;
        height: 28px;
        line-height: 28px;
        background-color: #2d64b3;
        border-radius: 2px;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
    }
</style>
